<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>微博</title>
	<link href="style/weibo.css" rel="stylesheet" type="text/css"/>
	<script src="./lib/axios.min.js"></script>
</head>

<body>
<div class="jyArea">
	<div class="takeComment">
		<textarea name="textarea" class="takeTextField" id="tijiaoText"></textarea>
		<div class="takeSbmComment">
			<input type="button" class="inputs" value=""/>
		</div>
	</div>
	
	
	<div class="commentOn">
		
	</div>
</div>
</body>
<script>
	axios.defaults.baseURL = "http://192.168.46.23:8081";
	axios.interceptors.response.use(res=>res.data)
	const btn = document.querySelector(".inputs");
	const contextArea = document.querySelector("#tijiaoText");
	btn.onclick = function () {
		const context = contextArea.value.trim();
		if(context.length===0){
			alert("请输入微博内容");
			return;
		}
		axios.post("/weibo",{
			context
		}).then(({ok,msg})=>{
			if(ok === 1){
				contextArea.value = null;
			    getWeibo();
			}else{
				alert(msg);
			}
		})
	}
	getWeibo();
	// 获取微博
	async function getWeibo(pageNo=1,pageSize=3){
		const res = await axios.get(`/weibo/${pageSize}/${pageNo}`);
		if(res.ok === -1){
			alert(res.msg);
			return;
		}
		let pageInfo = "";
		for(let i=1;i<=res.pageSum;i++){
			pageInfo+=`<a onclick="getWeibo(${i})" href="javascript:;" class="${res.pageNo===i?'active':''}">${i}</a>`
		}
		document.querySelector(".commentOn").innerHTML = `
			<div class="noContent" style="display:${res.contentList.length===0?'block':'none'}">暂无留言</div>
	        <div class="messList">
	            ${res.contentList.map(item=>(`
		            <div class="reply">
		                <p class="replyContent">${item.context}</p>
		                <p class="operation">
		                    <span class="replyTime">${item.addTime}</span>
		                    <span class="handle">
		                        <a href="javascript:;" onclick="upWeiboById('${item._id}',1,${res.pageNo})" class="top">${item.topNum}</a>
		                        <a href="javascript:;" onclick="upWeiboById('${item._id}',2,${res.pageNo})" class="down_icon">${item.downNum}</a>
		                        <a href="javascript:;" onclick="delWeiboById('${item._id}',${res.pageNo})" class="cut">删除</a>
		                    </span>
		                </p>
		            </div>
	            `)).join("")}
	            
	        </div>
	        <div class="page">
	           ${pageInfo}
	        </div>
		`
	}
	// 删除微博
	function delWeiboById(id,pageNo){
		axios.delete("/weibo/"+id).then(value=>{
			if(value.ok === 1){
				getWeibo(pageNo)
			}else{
				alert(value.msg);
			}
		})
	}
	function upWeiboById(id,type,pageNo){
		console.log(id,type,pageNo)
		axios.put("/weibo/"+id+"/"+type).then(value=>{
			if(value.ok === 1){
				getWeibo(pageNo)
			}else{
				alert(value.msg);
			}
		})
	}
	
	
	
</script>
</html>
